<template>
  <Dialog :title="title" :visible="visible" button-text="提交" :reveal="reveal" :loading="loading" @close="handleClose" @confirm="handleConfirm">
    <div v-if="flag">
      <div class="divs">
        <p><span>{{ customer }}</span><span>女</span><span>135*****0101</span></p>
        <p>此顾客还无分诊信息</p>
        <p>
          <el-button @click="returnBtn">返回</el-button>
          <el-button @click="addTriageBtn">+增加分诊</el-button>
        </p>
      </div>
    </div>
    <div v-else>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="顾客：" prop="customerName">
          <el-row>
            <el-col :span="18">
              <el-autocomplete v-model="form.customerName" :fetch-suggestions="querySearch" placeholder="姓名、手机号、编号" @select="handleSelect" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="分诊类型：" prop="treatType">
          <el-row>
            <el-col :span="18">
              <DictionarySelector :value.sync="form.treatType" code="swan_front_jzlx" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="咨询分类：" prop="adviserType">
          <el-row>
            <el-col :span="18">
              <!-- <el-cascader v-model="form.adviserType" :options="consultingOptions" :props="optionsProps" clearable /> -->
              <el-select v-model="form.adviserType" value-key="id" @change="handleSelectConsulting">
                <el-option v-for="item in consultingOptions" :key="item.id" :label="item.name" :value="item" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="意向项目：" prop="intentCaseName">
          <el-row>
            <el-col :span="18">
              <el-select v-model="form.intentCaseName" value-key="id" @change="handleSelectProject">
                <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="咨询师：" prop="adviserName">
          <el-row type="flex">
            <el-col :span="18">
              <el-select v-model="form.adviserName" :disabled="form.advSwitch==='开启'&&form.arrangeType==='轮排'?true:false" value-key="id" @change="handleSelectAdviserName">
                <el-option v-for="item in adviserOptions" :key="item.id" :label="item.usrName" :value="item" />
              </el-select>
            </el-col>
            &nbsp;&nbsp;&nbsp;
            <el-col v-if="form.advSwitch==='开启'" :span="6">
              <el-checkbox v-model="form.arrangeType" true-label="轮排" false-label="点排" @change="hangdleChecked(true)">轮排</el-checkbox>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="主治医生：" prop="faceDoctorName">
          <el-row type="flex">
            <el-col :span="18">
              <el-select v-model="form.faceDoctorName" :disabled="form.docSwitch==='开启'&&form.arrangeTypeDoc==='轮排'?true:false" value-key="id" @change="handleSelectFaceDoctorName">
                <el-option v-for="item in faceDoctorOptions" :key="item.id" :label="item.usrName" :value="item" />
              </el-select>
            </el-col>
            &nbsp;&nbsp;&nbsp;
            <el-col v-if="form.docSwitch==='开启'" :span="6">
              <el-checkbox v-model="form.arrangeTypeDoc" true-label="轮排" false-label="点排" @change="hangdleChecked(false)">轮排</el-checkbox>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- <el-form-item v-if="typeVal ==='2'" label="医生助理：">
          <el-row>
            <el-col :span="18">
              <DictionarySelector :value.sync="form.doctorHelperName" code="swan_front_jzlx" />
            </el-col>
          </el-row>
        </el-form-item> -->
      </el-form>
    </div>
  </Dialog>
</template>

<script>
import { DictionarySelector } from "@rabbit.do/rabbit";
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
    DictionarySelector,
  },
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    showcom: {
      type: Boolean,
      default: false,
    },
    customer: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        arrangeType: '轮排',
        arrangeTypeDoc: '轮排',
      },
      restaurants: [], // 顾客数据
      selectCustomerData: {}, // 选中顾客
      selectProjectData: {}, // 选中项目
      selectConsultingData: {},
      consultingOptions: [],
      adviserOptions: [],
      faceDoctorOptions: [],
      projectOptions: [],
      // optionsProps: {
      //   children: 'children',
      //   label: 'deptName',
      //   value: 'deptName',
      //   checkStrictly: true, // 选择任意一项
      // },
      // typeVal: '',
      reveal: true,
      loading: false,
      currentUserInfo: {},
      rules: {
        customerName: [
          { required: true, message: '请输入顾客名称', trigger: 'change' },
        ],
        treatType: [
          { required: true, message: '请选择分诊类型', trigger: 'change' },
        ],
        adviserType: [
          { required: true, message: '请选择咨询分类', trigger: 'change' },
        ],
        // adviserName: [
        //   { required: true, message: '请选择咨询人', trigger: 'change' },
        // ],
      },
    };
  },
  methods: {
    async getSwitchState() {
      const res = await this.$api['reception/triage/getSwitch']();
      if (res.code !== 200) return this.$message.error(res.msg);
      this.form.advSwitch = res.data.advSwitch;
      this.form.docSwitch = res.data.docSwitch;
    },
    getCurrentUserInfo() {
      this.currentUserInfo = { accepterName: this.$store.getters.name, accepterId: this.$store.getters.id };
    },
    addTriageBtn(row) {
      if (row && row.id) {
        this.form = row;
        // if (row.projectName) {
        //   this.form.intentCaseName = row.projectName;
        // }
        // if (row.advisoryClassification) {
        //   this.form.adviserType = row.advisoryClassification;
        // }
        // console.log(row, '签到分诊');
        // if (row.appointmentType === '现场咨询') {
        //   this.form.adviserName = row.receiverName;
        // } else {
        //   this.form.faceDoctorName = row.receiverName;
        // }
      }
      this.flag = false;
      this.reveal = true;
      this.getTriageData();
    },
    editTriageBtn(row) {
      this.form = row;

      this.reveal = true;

      this.getTriageData();
    },
    getTriageData() {
      this.getSwitchState();
      this.loadAll();
      this.getConsultingData();
      this.getAdviserData();
      this.getFaceDoctorData();
      this.getProjectData();
      this.getCurrentUserInfo();
    },
    async notTriage() {
      this.reveal = false;
      // console.log(this.customer, '根据顾客名字查询顾客详情');
      // if (this.customer && this.customer !== '') {
      //   const res = await this.$api['reception/triage/createTriage']({ ...this.form, ...this.currentUserInfo });
      //   console.log(res);
      // }
    },
    // 返回
    returnBtn() {
      this.$emit('update:visible', false);
      // this.$emit('update:flag', false);
    },
    handleConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          if (this.title === "增加分诊") {
            this.loading = true;
            const res = await this.$api['reception/triage/createTriage']({ ...this.form, ...this.currentUserInfo });
            this.loading = false;
            if (res.code !== 200) return this.$message.error('新增分诊失败！');
            this.$message.success('新增分诊成功！');
          } else {
            this.loading = true;
            const res = await this.$api['reception/triage/updataTriage']({ ...this.form, ...this.currentUserInfo });
            this.loading = false;
            if (res.code !== 200) return this.$message.error('修改分诊失败！');
            this.$message.success('修改分诊成功！');
          }
          this.$emit('update:visible', false);
          this.$emit('success');
        }
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('update:showcom', false);
      this.$refs.formRef.resetFields();
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.form.customerId = item.id;
      this.form.customerName = item.name;
      this.form.customerCode = item.code;
      this.form.sex = item.sex;
      this.form.customerPhone = item.phone;
      this.form.source = item.informationSources;
      // this.selectCustomerData = { customerId: item.id, customerName: item.name, sex: item.sex, customerCode: item.code };
    },
    handleSelectConsulting(item) {
      this.form.adviserType = item.name;
      this.form.adviserTypeId = item.id;
    },
    handleSelectProject(item) {
      this.form.intentCaseId = item.id;
      this.form.intentCaseNo = item.no;
      this.form.intentCaseName = item.name;
      this.form.deptId = item.deductionDeptId;
      this.form.deptName = item.deductionDeptName;
    },
    handleSelectAdviserName(item) {
      this.form.adviserName = item.usrName;
      this.form.adviserId	 = item.id;
    },
    handleSelectFaceDoctorName(item) {
      this.form.faceDoctorName = item.usrName;
      this.form.faceDoctorId = item.id;
    },
    hangdleChecked(flags) {
      console.log(this.form.arrangeType);
      if (flags && this.form.arrangeType === '轮排') {
        this.form.adviserName = '';
      } else if (!flags && this.form.arrangeTypeDoc === '轮排') {
        this.form.faceDoctorName = '';
      }
    },
    async loadAll() {
      // 所有顾客详情
      const res = await this.$api['reception/subscribe/findall']();
      if (res.code === 200) {
        res.data.map(item => {
          item.value = item.name;
        });
        this.restaurants = res.data;
      }
    },
    async getConsultingData() {
      // 咨询分类
      const consultingData = await this.$api['reception/subscribe/consulttype']();
      if (consultingData.code === 200) {
        this.consultingOptions = consultingData.data.result;
      }
    },
    async getAdviserData() {
      // 咨询师
      const adviserData = await this.$api['reception/triage/AllByJobName']({ hospitalJobName: '咨询师' });
      if (adviserData.code === 200) {
        this.adviserOptions = adviserData.data;
      }
    },
    async getFaceDoctorData() {
      // 主治医生
      const faceDoctorData = await this.$api['reception/triage/AllByJobName']({ hospitalJobName: '主治医生' });
      if (faceDoctorData.code === 200) {
        this.faceDoctorOptions = faceDoctorData.data;
      }
    },
    async getProjectData() {
      // 意向项目
      const projectData = await this.$api['reception/triage/findAll']();
      if (projectData.code === 200) {
        this.projectOptions = projectData.data;
      }
    },
    // handleTreatType(val) {
    //   this.typeVal = val;
    // },
  },
};
</script>
<style lang="scss" scoped>

.divs {
  text-align: center;
  span{
    margin: 0 20px;
  }
}

</style>
